<template>
  <div
    v-if="!loading"
    class="vc-card-list"
    :style="visual.parseStyle(compStyle)"
  >
    <div
      v-for="(data, index) in dataList"
      :key="index"
      class="vc-card-list-item"
      :style="getStyle(data)"
    >
      <div
        class="vc-card-list-item-title"
        :style="getTitleStyle(data)"
      >{{data["标题"]}}</div>
      <div
        class="vc-card-list-item-value"
        :style="getValueStyle(data)"
      >{{data["数值"]}}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, nextTick, onMounted } from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const dataList = ref([{}]);
const loading = ref(true);

const init = async() => {
  loading.value = true;
  if (currNode.value.compData.dataSourceType === '') {
    currNode.value.compData.dataSourceType = '静态数据';
  }
  await nextTick(() => loading.value = false);
};

const loadDataList = async() => {
  loading.value = true;
  dataList.value = (await visual.loadData(props.compData, {}, {}, currNode.value) || {}).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList.value);
  await nextTick(() => loading.value = false);
};

const getTitleStyle = (data) => {
  const compStyle = props.compStyle || {};
  const styleList = compStyle['styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  return visual.parseFontStyle(style, '', 'title.');
};

const getValueStyle = (data) => {
  const compStyle = props.compStyle || {};
  const styleList = compStyle['styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  let result = visual.parseFontStyle(style, '', 'value.');
  if (style && style['value.show'] === false) {
    result += "display: none!important;";
  }
  return result;
};

const getStyle = (data) => {
  const compStyle = props.compStyle || {};
  const styleList = compStyle['styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  return style ? visual.parseStyle(style) :
    "background: #409EFF;" +
    "color: white;" +
    "height: 100px;" +
    "justify-content: center;" +
    "align-items: center;" +
    "display: flex;" +
    "flex-direction: column;" +
    "border-radius: 5px;" +
    "flex-wrap: nowrap;" +
    "flex: 1;"
};

watch(() => props.compStyle, () => {
  init();
}, { deep: true });

watch(() => props.node.compData?.refresh, () => {
  loadDataList();
});

onMounted(async() => {
  await init();
  await loadDataList();
});
</script>